<template>
  <div class="app-container">
    <!-- 基础信息 -->
    <h5 class="titleInfo">基础信息</h5>
    <el-form
      ref="form"
      class="form"
      :model="form"
      :rules="rules"
      label-width="200px"
      :disabled="isDisabled"
    >
      <el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="机构名称" prop="hospital_id">
              <el-select
                v-model="form.hospital_id"
                placeholder="请选择"
                clearable
                class="inp_wid"
                @change="handleChange"
              >
                <el-option
                  v-for="item in hospitalList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="医生姓名" prop="doctor_name">
              <el-input v-model="form.doctor_name" class="inp_wid" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="医生职位" prop="position">
              <el-select
                v-model="form.position"
                placeholder="请选择"
                clearable
                class="inp_wid"
                @change="handleChange1"
              >
                <el-option
                  v-for="item in doctorList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="学历职称" prop="education">
              <el-select
                v-model="form.education"
                clearable
                placeholder="请选择"
                class="inp_wid"
                @change="handleChange2"
              >
                <el-option
                  v-for="item in educationList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="医生自定义标签" prop="custom_label">
              <el-input v-model="form.custom_label" clearable class="inp_wid" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="医生好评率" prop="high_praise_rate">
              <el-input v-model="form.high_praise_rate" clearable class="inp_wid">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="医生预约量" prop="book_volume">
              <el-input v-model="form.book_volume" clearable class="inp_wid" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="医生简介" prop="introduction">
              <el-input v-model="form.introduction" clearable class="inp_wid" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="24">
          <el-form-item label="医生照片" prop="portrait">
            <newUpload
              ref="uploadImg"
              :file-num="1"
              :file-list="fileList"
              :width="800"
              :height="800"
            />
            <div>图片尺寸为800px*800px</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="医生资格证" prop="pic_qualification">
            <newUpload
              ref="uploadImg1"
              :file-num="1"
              :file-list="fileList1"
              :width="800"
              :height="600"
            />
            <div>最多上传1张，图片尺寸为800px*600px</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="医生执业证" prop="pic_license">
            <newUpload
              ref="uploadImg2"
              :file-num="1"
              :file-list="fileList2"
              :width="800"
              :height="600"
            />
            <div>最多上传1张，图片尺寸为800px*600px</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="主诊医生资格证" prop="pic_qualification_main_doctor">
            <newUpload
              ref="uploadImg3"
              :file-num="1"
              :file-list="fileList3"
              :width="320"
              :height="166"
            />
            <div>最多上传1张，图片尺寸为320px*166px</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="医生详情" prop="detail" style="width:96%">
            <!--  style="width:96%" -->
            <Tinymce v-model="form.detail" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button
          v-if="type != 'edit' && type != 'detail'"
          style="margin:30px 0"
          type="primary"
          @click="submitFn('form',1)"
        >完成</el-button>
        <el-button
          v-if="type == 'edit'"
          style="margin:30px 0"
          type="primary"
          @click="submitFn('form',2)"
        >完成</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  getHospitaldetails,
  getListName,
  addList,
  editList
} from '@/api/couponList'
import newUpload from '@/components/UploadImg/shopImgUp'
import Tinymce from '@/components/Tinymce'
export default {
  name: 'DoctorInfo',
  components: { Tinymce, newUpload },
  data() {
    return {
      form: {
        hospital_id: '',
        hospital_name: '',
        doctor_name: '',
        position: '',
        education: '',
        custom_label: '',
        high_praise_rate: '',
        book_volume: '',
        introduction: '',
        portrait: [],
        pic_qualification: [],
        pic_license: [],
        pic_qualification_main_doctor: [],
        detail: ''
      },
      fileList: [],
      fileList1: [],
      fileList2: [],
      fileList3: [],
      hospitalList: [], // 机构名称
      doctorList: [], // 医生职位
      educationList: [], // 学历职称
      rules: {
        hospital_id: [
          {
            required: true,
            message: '请选择机构名称',
            trigger: 'change'
          }
        ],
        doctor_name: [
          {
            required: true,
            message: '请输入医生姓名',
            trigger: 'blur'
          }
        ],
        position: [
          {
            required: true,
            message: '请选择医生职位',
            trigger: 'change'
          }
        ],
        education: [
          {
            required: true,
            message: '请选择学历职称',
            trigger: 'change'
          }
        ],
        custom_label: [
          {
            required: true,
            message: '请输入自定义标签',
            trigger: 'blur'
          }
        ],
        high_praise_rate: [
          {
            required: true,
            message: '请输入医生好频率',
            trigger: 'blur'
          }
        ],
        book_volume: [
          {
            required: true,
            message: '请输入医生预约量',
            trigger: 'blur'
          }
        ],
        // introduction
        introduction: [
          {
            required: true,
            message: '请输入医生姓名',
            trigger: 'blur'
          }
        ],
        portrait: [
          {
            required: true,
            message: '请上传医生照片'
          }
        ],
        pic_qualification: [
          {
            required: true,
            message: '请上传医生资格证'
          }
        ],
        pic_license: [
          {
            required: true,
            message: '请上传医生执业证'
          }
        ],
        pic_qualification_main_doctor: [
          {
            required: true,
            message: '请上传主诊医生资格证'
          }
        ],
        detail: [
          {
            required: true,
            message: '请填写购买须知',
            trigger: 'blur'
          }
        ]
      },
      options: [],
      loanOption: [],
      selectedOptions: [],
      list1: {},
      submitForm: {},
      labelOptions: [],
      fileNum: 1,
      doctorId: '',
      type: '',
      isDisabled: false
    }
  },
  watch: {
    'form.detail'(val) {
      if (val) {
        this.$refs.form.clearValidate('detail')
      } else {
        this.$refs.form.validateField('detail')
      }
    }
  },
  mounted() {
    // console.log("query", this.$route);
    this.doctorId = this.$route.query.id
    this.type = this.$route.query.type
    if (this.type == 'edit') {
      this.$route.meta.title = '医生信息编辑'
      this.isDisabled = false
      this.getDetails(this.doctorId)
    } else if (this.type == 'detail') {
      this.$route.meta.title = '医生信息详情'
      this.getDetails(this.doctorId)
      this.isDisabled = true
    } else {
      this.$route.meta.title = '添加医生信息'
    }
    this.getSelectList()
  },
  methods: {
    // 获取详情
    getDetails(id) {
      const data = { id }
      getHospitaldetails(data).then((res) => {
        const resData = res.data.data
        this.form.hospital_id = resData.hospital_id
        this.form.position = resData.position
        this.form.education = resData.education
        this.form.doctor_name = resData.doctor_name
        this.form.custom_label = resData.custom_label
        this.form.high_praise_rate = resData.high_praise_rate
        this.form.book_volume = resData.book_volume
        this.form.introduction = resData.introduction
        this.form.detail = resData.detail
        // console.log("url", common.img_url);
        this.fileList = [
          { url: 'https://img.yuepinyuemei.com/' + resData.portrait }
        ]
        this.fileList1 = [
          {
            url: 'https://img.yuepinyuemei.com/' + resData.pic_qualification
          }
        ]
        this.fileList2 = [
          { url: 'https://img.yuepinyuemei.com/' + resData.pic_license }
        ]
        this.fileList3 = [
          {
            url:
              'https://img.yuepinyuemei.com/' +
              resData.pic_qualification_main_doctor
          }
        ]
        this.$refs.uploadImg.getLength(this.fileList)
        this.$refs.uploadImg1.getLength(this.fileList1)
        this.$refs.uploadImg2.getLength(this.fileList2)
        this.$refs.uploadImg3.getLength(this.fileList3)
      })
    },
    // 添加页面获取机构名称/医生职位/学历职称下拉选
    getSelectList() {
      getListName().then((res) => {
        if (res.data.code == 0) {
          const resData = res.data.data
          if (resData.hospitalArray) {
            const arr = []
            resData.hospitalArray.forEach((item) => {
              arr.push({
                label: item.name,
                value: item.id
              })
            })
            this.hospitalList = arr
            console.log('res1', this.hospitalList)
          }
          if (resData.positionArray) {
            const arr = []
            resData.positionArray.forEach((item) => {
              arr.push({
                label: item.name,
                value: item.id
              })
            })
            this.doctorList = arr
            console.log('res2', this.doctorList)
          }
          if (resData.educationArray) {
            const arr = []
            resData.educationArray.forEach((item) => {
              arr.push({
                label: item.name,
                value: item.id
              })
            })
            this.educationList = arr
          }
        }
      })
    },
    // 医院/机构id
    handleChange(e) {
      // console.log("e1", e);
      this.form.hospital_id = e
    },
    // 医生职位id
    handleChange1(e) {
      // console.log("e2", e);
      this.form.position = e
    },
    // 学历id
    handleChange2(e) {
      // console.log("e3", e);
      this.form.education = e
    },
    // 编辑保存
    // 添加保存
    submitFn(form, type) {
      this.form.portrait = this.$refs.uploadImg.submitUpload()[0]
      this.form.pic_qualification = this.$refs.uploadImg1.submitUpload()[0]
      this.form.pic_license = this.$refs.uploadImg2.submitUpload()[0]
      this.form.pic_qualification_main_doctor = this.$refs.uploadImg3.submitUpload()[0]
      const data = {
        id: type == 2 ? this.doctorId : '',
        hospital_id: this.form.hospital_id,
        doctor_name: this.form.doctor_name,
        position: this.form.position,
        education: this.form.education,
        custom_label: this.form.custom_label,
        high_praise_rate: this.form.high_praise_rate,
        book_volume: this.form.book_volume,
        introduction: this.form.introduction,
        portrait: this.form.portrait,
        pic_qualification: this.form.pic_qualification,
        pic_license: this.form.pic_license,
        pic_qualification_main_doctor: this.form.pic_qualification_main_doctor,
        detail: this.form.detail
      }
      if (type == 1) {
        addList(data).then((res) => {
          this.$refs[form].validate((valid) => {
            if (valid) {
              // console.log("res", res);
              if (res.data.code == 0) {
                this.warnStatus('添加成功', 'success')
                this.$router.push('/doctorList')
              } else {
                this.warnStatus(res.data.message, 'warning')
              }
            }
          })
        })
      }
      if (type == 2) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            editList(data).then((res) => {
              console.log('rese', res)
              if (res.data.code == 0) {
                this.warnStatus('修改成功', 'success')
                this.$router.push('/doctorList')
              } else {
                this.warnStatus(res.data.message, 'warning')
              }
            })
          }
        })
      }
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      })
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, 'error')
    },
    // 成功状态弹窗
    warnStatus(txt, status) {
      this.eleMsg(txt, status)
      // this.eleMsg(txt, "warning");
    }
  }
}
</script>
